<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html5桌面通知</title>
</head>
<body>
<input type="button" value="桌面通知" onclick="test();">
<script src="layer/jquery-3.1.1.min.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript" src="notify/notification.js"></script>
<script type="text/javascript">
    /**
     * 日期格式转换
     * @param fmt
     * @returns {*}
     */
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }

    function test() {
        var data = "{\"type\":\"doorOper\",\"content\":{\"createTime\":1522395467000,\"status\":\"OPEN\",\"openMode\":\"Fingerprint Open\",\"device\":{\"id\":42,\"createTime\":1522200292000,\"deviceName\":\"702会议室-测试门锁\",\"deviceNo\":\"863703032711389\",\"deviceId\":\"915e8dc7-0f7c-4c83-b45f-8a83dd268f3f\"},\"leftPoint\":13.13817896389325,\"topPoint\":14.852307692307692,\"deviceDesc\":\"863703032711389测试\"}}\n"

        var notifyMsg = '设备通知';

        var dataObj = JSON.parse(data);

        // console.log(dataObj);

        var type = dataObj.type;

        switch (type) {
            case 'doorOper': //门锁操作
                var name = dataObj.content.device.deviceName;
                var time = new Date(dataObj.content.createTime * 1).format("yyyy-MM-dd hh:mm:ss");
                var status = dataObj.content.status;
                var openMode = dataObj.content.openMode,
                    openModeStr;
                switch (openMode) {
                    case "Fingerprint Open":
                        openModeStr = "指纹开锁";
                        break;
                    case "Password Open":
                        openModeStr = "密码开锁";
                        break;
                    case "APP Open":
                        openModeStr = "远程开锁";
                        break;
                    default:
                        openModeStr = "刷卡开锁";
                        break;
                }
                notifyMsg = status == 'OPEN' ? '设备【' + name + '】被打开；' + '操作时间：[' + time + ']；开锁方式：[' + openModeStr + ']。' : '设备【' + name + '】被关闭；' + '操作时间：[' + time + ']。';
                break;
            case 'doorAlarm': //门锁告警

                break;
        }
        var html = '<div style="position: relative;padding: 20px;line-height: 24px;word-break: break-all;overflow: hidden;font-size: 14px;overflow-x: hidden;overflow-y: auto;">' +
            notifyMsg +
            '</div>';
        layer.open({
            type: 1, //层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
            title: '设备通知', //控制默认标题栏。title:'标题'，自定义标题样式，可以title: ['标题', 'background:#c00;'] 第二个参数可书写任意css
            // offset: ['', ''], //[纵坐标, 横坐标]，默认为垂直水平居中
            // area: ['50%', '66%'], //[宽度, 高度] 默认自适应
            // maxmin: true, //是否输出窗口最小化/全屏/还原按钮,默认false
            shade: false, //控制遮罩[0.5, '#000']（[透明度0~1, '色值']）,设置为false则不显示
            // shadeClose: true, //遮罩显示情况下，控制点击遮罩区域是否关闭层
            // scrollbar: false, //屏蔽浏览器滚动条
            anim: 0, //动画类型0~6 默认0 设置false为不使用动画
            content: html, //页面地址
            closeBtn: 0,
            btn: "确定",
            btnAlign: "c"
        });

        //桌面通知 依赖notification.js @param 标题，消息内容，点击事件的回调发法
        showNotification('苏州电信智慧物联网', notifyMsg, function (notify) {
            window.focus(); //激活所在窗口
            setTimeout(function () { //延时主动关闭通知消息
                notify.close();
            }, 2000);
        });

    }

    // setInterval(test, 5000);

</script>
</body>
</html>